<script setup>
import Area from "@/components/Area";
const props = defineProps({
  modelValue: { type: Object, default: () => ({}) },
  options: { type: Object, default: () => ({}) },
  disabled: Boolean,
  loadData: Boolean,
  custom_sku: { type: String },
});

const emit = defineEmits(["update:modelValue"]);

// 表单处理
const formRef = ref();
const form = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emit("update:modelValue", val);
  },
});
const validate = async () => {
  return new Promise((resolve) => {
    formRef?.value.validate((valid, fields) => {
      resolve({ model: "basic", name: "基础信息", success: valid, message: fields });
    });
  });
};

const validator = (rule, value, cb) =>
  cb(!value ? new Error("供应商负责人不能为空") : undefined);

const clearValidate = () => {
  formRef?.value?.clearValidate();
};
const resetFields = () => {
  formRef?.value?.resetFields();
};
defineExpose({ validate, clearValidate, resetFields, formRef });

const addAddress = () => {
  form.value.basic.factory_address_list.push({
    default_account: 2,
    factory_address: "",
    factory_area_id: [],
    factory_area_name: [],
  });
};

const addressChange = (idx) => {
  form.value.basic.factory_address_list.forEach((d, i) => {
    d.default_account = idx === i ? 1 : 2;
  });
};

const addressRemove = (i) => {
  form.value.basic.factory_address_list.splice(i, 1);
  if (!form.value.basic.factory_address_list.some((d) => d.default_account === 1)) {
    form.value.basic.factory_address_list[0].default_account = 1;
  }
};
</script>
<template>
  <el-form ref="formRef" :model="form" label-position="top" :disabled="disabled">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-form-item label="SKU">
          <el-input v-model="props.custom_sku" disabled></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item
          label="供应商名称"
          prop="basic.supplier_name"
          :rules="[{ required: true, message: '请输入供应商名称', trigger: 'change' }]"
        >
          <el-input v-model="form.basic.supplier_name" placeholder="请选择"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item
          label="供应商类型"
          prop="purchase.purchase_type"
          :rules="[{ required: true, message: '请输入供应商类型', trigger: 'change' }]"
        >
          <VSelect
            v-model="form.purchase.purchase_type"
            :options="options.purchase_type"
            placeholder="请选择"
            filterable
            clearable
            class="w-full"
          />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="供应商状态" prop="status">
          <el-switch v-model="form.basic.status" :active-value="1" :inactive-value="2" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item
          label="供应商负责人"
          prop="basic.director_id"
          :rules="[{ required: true, message: '请选择供应商负责人', trigger: 'change' }]"
        >
          <select-personnel
            v-model="form.basic.director_id"
            placeholder="请选择"
          ></select-personnel>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="供应商编码">
          <el-input v-model="form.basic.supplier_coding" placeholder="请选择"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="供应商ID">
          <el-input v-model="form.basic.supplier_code" placeholder="请选择"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="公司地址" required>
          <Area v-model="form.basic" field="company" />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item
          label="工厂地址"
          :prop="['factory_address_list', '0', 'factory_area_id']"
          class="col-span-2"
        >
          <template #label> 工厂地址 </template>
          <div class="flex flex-col gap-1">
            <div
              v-for="(d, i) in form.basic.factory_address_list"
              :key="i"
              class="grid"
              :style="{ 'grid-template-columns': 'repeat(14, minmax(0, 1fr))' }"
            >
              <el-radio
                :key="i"
                v-model="d.default_account"
                :label="1"
                @change="addressChange(i)"
                >&nbsp;</el-radio
              >
              <Area
                v-model="form.basic.factory_address_list[i]"
                field="factory"
                class="col-span-10"
              />
              <div class="col-span-2 ml-2">
                <el-button type="primary" link @click="addAddress">添加</el-button>
                <el-button
                  v-if="form.basic.factory_address_list.length > 1"
                  link
                  type="primary"
                  @click="addressRemove(i)"
                  >移除</el-button
                >
              </div>
            </div>
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="备注">
          <el-input
            type="textarea"
            v-model="form.basic.remark"
            placeholder="请输入备注"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
